<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap.css" />">
<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap-theme.css" />">
<link rel="stylesheet" href="<c:url value="/resources/css/carousel.css" />">
<link rel="stylesheet" href="<c:url value="/resources/css/jquery.dataTables.css" />">
<link rel="stylesheet" href="<c:url value="/resources/css/jquery.dataTables_themeroller.css" />">

<script type="text/javascript" src="<c:url value="/resources/js/jquery-2.1.1.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/bootstrap.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.dataTables.js" />"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$("#tableCard").dataTable();
		});
</script>
<script type="text/javascript">
	function checkInbox(){
		$.ajax({
			url: '<c:url value="/checkInbox/ajax" />',
			type: 'get',
			success: function(i){
				$("#inbox").html(i);
			}
		});
	}
</script>
<script type="text/javascript">
	var intervalId = 0;
	imtervalId = setInterval(checkInbox,5000);
</script>
<title>Card Page</title>
</head>
<body>
	<div class="container">

      <!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="<c:url value="/" />">DAO JPA</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="<c:url value="/" />">Home</a></li>
              <security:authorize access="hasRole('ROLE_ADMIN')">
              <li><a href="<c:url value="/adminpage"/>">Admin Page</a></li>
              </security:authorize>
              <security:authorize access="isAuthenticated()">
              <li><a href="<c:url value="/profile"/>">Profile</a></li>
              <li><a href="<c:url value="/account"/>">Accounts</a></li>
              <li class="active"><a href="<c:url value="/card"/>">Cards</a></li>
              <li><a href="<c:url value="/transfer"/>">Transfer</a></li>
              </security:authorize>
              <security:authorize access=" !isAuthenticated()">
              <li><a href="<c:url value="/login"/>">Login</a></li>
              </security:authorize>
              <li><a href="<c:url value="/register"/>">Register</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
            	<security:authorize access=" isAuthenticated()">
            	<li><a>Welcome ${pageContext.request.userPrincipal.name}</a></li>
            	<li><a href="<c:url value="/checkInbox"/>">Inbox <span class="badge"><div id="inbox">0</div></span></a></li>
            	<li><a href="<c:url value="/logout"/>">Logout</a></li>
            	</security:authorize>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>
    </div> <!-- /container -->
    
     <div class="container">
    	<h1 class="text-center text-primary">
    		Card Management
    	</h1>
    	<h2 class="text-warning">Add Card</h2>
    	
    	<form action="<c:url value="/card/createCard" />" method="post" class="form-horizontal" role="form">
		  <div class="form-group">
		    <label for="cardType" class="col-sm-2 control-label">Card Type</label>
		    <div class="col-sm-6">
		      <select name="cardType" class="form-control">
		      	<option value="Master">Master</option>
		      	<option value="Visa">Visa</option>
		      	<option value="American Express">American Express</option>
		      </select>
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="cardNumber" class="col-sm-2 control-label">Card Number</label>
		    <div class="col-sm-6">
		      <input type="text" class="form-control" name="cardNumber" placeholder="Card Number">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="availableAmount" class="col-sm-2 control-label">Available Amount</label>
		    <div class="col-sm-6">
		      <input type="text" class="form-control" name="availableAmount" placeholder="Available Amount">
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-default btn-primary">Save</button>
		    </div>
		  </div>
		</form>
    	<h2 class="text-warning">List Your Card</h2>
    	<table class="table table-striped table-bordered table-hover" id="tableCard">
    		<thead>
	    		<tr>
	    			<th>Card Type</th>
	    			<th>Card Number</th>
	    			<th>Available Amount</th>
	    		</tr>
    		</thead>
    		<tbody>
    			<c:forEach var="card" items="${cards}">
    				<tr>
    					<td>${card.cardType}</td>
    					<td>${card.number}</td>
    					<td>${card.amount}</td>
    				</tr>
    			</c:forEach>
    		</tbody>
    	</table>
     </div>
	  <div class="container"  style="padding-top: 50px;">
    	<div class="navbar navbar-default navbar-fixed-bottom">
    		<div class="container">
    			<p class="navbar-text">&copy; Hai Nguyen|Minh Nhut | Java Fresher</p>
    			<a href="#" class="navbar-btn btn btn-danger pull-right"><span class="glyphicon glyphicon-chevron-up"></span>Back To Top</a>
    		</div>
    	</div>
    </div>    
</body>
</html>